hello there!
First of all, thx a lot for this code! It works fine :) but I would like to know how to upload the "blob" on server side ? I'm a bit confused, should I use a post method ? I heard about node-formidable for node.js, but I also read some stuff concerning binary.js or some way to stream the data to the server but it's a bit obscure for me right now. For you what would be the best way to do that ?
It might be a dumb question but i'm quite new with web developping and particulary node.js
thx in advance!!

10 months later, I just posted a solution for this: http://typedarray.org/from-...

Sorry for the crazy delay obviously :)

how to get audio recorded file in our file system????

Yay! It finally works! I have tried this several times but I have never got it to work (I'm using Ubuntu).
Have a colorful demo! http://djazz.mine.nu/apps/v...

It let's you see the audio with a spectrum. It mutes your speakers to prevent loopback, but you can use the volume slider to listen to the mic input (use headphones!).
- djazz

How can I reduce the file size? A 16 sec file is over an mb. I tried to reduce the sampling rate and drop one channel data but then the playbacks at slower speed. Any suggestions?

I know your comment was posted over a year ago, but I wanted to leave this explanation in case someone else stumbles across this like I did via a Google search. Hopefully I can save someone else from having to stay up all night to figure this this out.

With the way the demo code is written, the slow playback speed you’re encountering is expected behavior. The reason for this is that the sampleRate variable is effectively being used to store the playback speed in the WAV file. It does *not* control the number of audio bytes being stored in the wav file.

The number of bytes being recorded is determined by the sample rate of the audio context. See https://developer.mozilla.o... for more information.

As far as I know, the sample-rate is a read-only property of the audio context. If the sample rate value being stored in the WAV file’s header is below the sampling rate of the audio context, it will result in slower playback. If it’s above the sampling rate of the audio context, it will result in accelerated playback. In fact, the sampling rate being used by the demo of 44100 is completely incorrect. At the time of writing this both FireFox and Chrome appear to record at 48000 Hz. Consequently, setting the variable to 44100 Hz will result in reduced playback speed.

The important take-away is this: the sampleRate variable should be set to the sampling rate of the browser's audio context. In this way, the payback speed will match the recording speed and the file will sound normal.

In order to reduce the file size, you must reduce the number of bytes being stored in the file. You can accomplish this in one of three ways. First, you can have a mono file (single channel) instead of a stereo file (two channel). See http://stackoverflow.com/a/... for an example on how to do this. This will effectively cut the file size in half, with the exception of the 44-byte file header.

Second, you can down-sample the recording from the audio context's sample rate to a reduced one. (See http://stackoverflow.com/a/... for an example). Audacity’s documentation has a list of common sampling rates at http://wiki.audacityteam.or....

The third option is to combine the two above methods for an even smaller file.

UPDATE:
Regardless of which option you choose, you will need to update any values in file header that are dependent on the values that you are changing. See the "pcm data" section of http://www-mmsp.ece.mcgill.... for how to calculate the various values and http://stackoverflow.com/a/... for a nice visual map of the header.

For example, if you chose to go to a mono-format and down-sample the recording, you would need to update the NumChannels, SampleRate, ByteRate, BlockAlign, and ChunkSize. In the code provided here, SampleRate, ByteRate, and ChunkSize are dynamically calculated. ChunkSize is calculated based on the length of the interleaved data, which is fine, but the ByteRate calculation is expecting two channels of audio (sampleRate * 2 channels * 2 bytes per sample = sampleRate * 4). The byte rate of a mono file would need to be sampleRate * 2 instead of sampleRate * 4 since you only have 1 channel.

Ideally, you should dynamically calculate any header value that is based on the sample rate or number of audio channels instead of hard-coding them. That way, if you ever feel the need to change them later, the header will be written correctly.

Hi RelativeCausality,

Thanks for bringing this up. Funny because on a current project I am working on I actually experienced the slow playback problem and actually updated the code here a few days ago in the article but not on the live demo. If you look at the snippets I posted in the article you will see that I query the audio context sample rate and use it for the WAV packaging. I came across that bug on a Chromebook where the sample rate is indeed 48k whereas my MacBook Air returns 44k.

For the file size reduction Harish, I might cover this in a future article. Steps from RelativeCausality are good ways to achieve this.

Btw, I also updated the live demo here for the sample rate issue.

Thanks!

BTW, I forgot to mention that if someone down-samples the recording they will need to make sure that the reduced sampling rate is stored in the WAV file instead of the original sampling rate.

Hi Harish, were you able to reduce the file size, I'm having exactly the same results when reduced the sample rate to 22050.

Where is a simple open source library that does all this? It seems like a wav packager should be available as an npm package

I want a node program that covert text to mp3 plz help

I have a code here that looks more like the error on the mobile "Android" ... could help me to verify ... it seems that it is high latency that the android owns, but I can not solve it, it keeps the voice failing

https://pt.stackoverflow.co...

I've been looking over this code for a while, but I still don't understand this line while encoding into a WAV:

var buffer = new ArrayBuffer(44 + interleaved.length * 2);
What is the "* 2" for? Doesn't this just double the length of the WAV file? If the data is already 'interleaved', then won't the length of the 'interleaved' data be the correct length anyway? Shouldn't it just be:

var buffer = new ArrayBuffer(44 + interleaved.length);

I think it's because of the size of a sample.

Samples are 16 bits (2 bytes) long in a standard .wav file.

Thanks for this post. Can you help to show how this can be use over socket.io i.e, from Microphone -> Socket.io (nodejs server) -> socket.io (another peer(s)) ->audio element.

Thanks.

Hi, thanks for the article its really knowledgeable, I have one doubt, can we set, sample rate(16000) and audio channel to mono, without breaking up audio?

Hi Thibault, My code is not working even i wrote the way the code is written. First of all, i tried to hear the audio blob and couldn't get any voice then on converting it into base64 data, i discovered that blob was empty If you want me i can give you my code.

Thanks for the article, very superb. I also commend you for updating the article and the comments.

I've found the code fails to record if you switch tabs for more than ~2 seconds in Chrome (possibly FF as well). The fix I came up with revolves around connecting and disconnecting the recorder to and from the destination. This also prevents having onaudioprocess to run continually. Do you have this code on Github so I can contribute the change?

getUserMedia (with webkit prefixed) not working on Mobile Safari 7 on iOS 7, any solution/polyfill ?

Thank you, one of my applications need a microphone volume, without the need to download the wav file. Ask how real-time detecting and obtaining the microphone volume?

FYI. I updated the Web Audio code so that it works with the latest implementations.

when do the recording on mac browser it works good and play back fine but pc(windows) records and plays back in a deeper voice. can any one help me with this please?
Many thanks

Thanks Thibaul such a great post.

How it is compare to AS3? in terms of speed.

manipulating byte arrays from script is it faster?

This looks suspiciously like you have purloined the code from recorder.js and removed it from its web worker home.

Hi,

I actually pointed out in the article clearly that part of the code comes from Matt's example here: http://webaudiodemos.appspo... (Matt being the author of Recorder.js)

The intent was also to explain how this whole thing works, when there is almost no resource on the web that actually explains that from A to Z.

My sincere apologies.

No worries!

You have errors in your code samples. You never define leftChannel or rightChannel, yet you try to push data into them

Hi olegk,

You should check the code source on the demo link, you will see the complete code. The snippets I posted here in the blog post are just samples from the code I wanted to highlight. In other words, the code is incomplete here in the post.

Thanks for the great article Thibault. This is one of the most useful WebRTC related posts for what I was trying to do.

I started packaging your snippet into a more modular version in coffeescript with a simplified API. https://github.com/rickcarl...

Hi Rick, happy to hear it was useful. I wrote this because I also did not find much on the web about it.

Very cool wrapper you wrote, love it. Thanks for the heads up!

Very helpful write up. Thanks a lot.
Why does the "live audio" indicator in the chrome tab(near the favicon) continue to blink after recording has stopped? Anyone know what the right way to release the audio nodes is?

Good catch, I am not releasing the nodes in this example. I will have a look when I have some time.

Check the lifetime section on the spec: https://dvcs.w3.org/hg/audi...

Post it here if you find any solution. Thanks!

Hi Thibault, how can I modify the above code to get an mp4 file?

Thank you,

great post.

i have implemented a java server based on nanoHTTP and java Websocket server

Do you think is it possible to save the channel data or clone the samples directly to the server using websockets?for a live broadcasting to the server.

Hi Daniele,

Yes, sounds totally doable. Not sure about the latency though, but give it a try!

Thank you for your excellent code. That is correct code that I was find. But it is run on the only chrome. Is there any method that can voice record on any web browser such as mobile? Thank you.

Brilliant, the demo works brilliantly in chrome, great post and run through.

Interesting post indeed. I've tried running the live demo on both the latest version of Chrome and Firefox on Mac and the recorded audio file plays but it's silent - nothing recorded. Is it possible the Chrome and Firefox updates may have broken your demo?

Hi Chris,

Weird. I just tried in Chrome 28.0.1500.71 and it worked. Which version of Chrome are you using? On Firefox, are you using the Nightly builds? Web Audio is partially implemented and they are still working on a bug (for createMediaStreamSource - https://bugzilla.mozilla.or..., so it is expected if it does not work in Firefox for now. Hopefully it will soon.

Let me know.

Yep, I'm running Chrome 28.0.1500.71 also with no luck; however, I was able to get the demo to run on Chrome Canary. Thanks.

Ah good. Thanks for the feedback on the issues, this is helpful.

help me the same in case of video

Thanks for the post, really interesting!

Happy you liked it!

its not recording its silent and not working please help me

After debugging, I had few questions :-

1) getusermedia() is nt working. So, how i can do audio recording for IE version??
2) In Mozilla, i got recordingLength = 0 due to which i didn't get any output.wav file for audio recording??
3) what does it means left channel and right channel.. If i do audio recording via mobile headphone in google chrome, i got nthing audio voice record in the file?
Can u please review these question and waiting for positive feedback from ur side..

This getusermedia() functionality works on IE???